<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
	<title>环境云API - 像素小站</title>
	<link rel="shortcut icon" type="image/x-icon" href="../../../lv5/public/favicon.ico">
	<link rel="stylesheet" href="/tp5/public/static/css/index.css">
	<link rel="stylesheet" href="/tp5/public/static/css/common.css">
  </head>
  <body>
      <div id="app">
        <el-container>
          <el-menu
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            background-color="#2EAF58"
            text-color="#fff"
            active-text-color="#fff">
            <img src="/tp5/public/static/img/logo-w.png" style="width: 40px;" alt="">
            <a href="https://www.fxpixels.site/tp5/public/index.php"><el-menu-item index="1">首页</el-menu-item></a>
            <el-menu-item index="2"><a href="https://www.fxpixels.site/tp5/public/index.php/api">API 文档</a></el-menu-item>			
            <el-menu-item index="3">关于</el-menu-item>
          </el-menu>
          <el-main>
            <!-- 内容 -->
              <el-row :gutter="10">
                  <el-col :span="14" :offset="5">
						<div id="app-index">
								<!--  -->
								<el-row :gutter="10">
									<el-col :span="16">
										<div class="grid-content bg-purple">
											<!-- 城市天气 -->
											<div class="city-weather-content">
												<div class="city-name"><span>广州</span><span>切换</span></div>
												<div class="today-weather">
													<div class="left">
														<img src="/api/tp5/public/static/img/2.png" alt="">
														<div class="left-status">
															<p>
																<span>晴天</span>&nbsp;<span>18</span>℃
															</p>
															<p>
																<span>东北风</span>&nbsp;<span>微风</span>&nbsp;湿度<span>63%</span>
															</p>
														</div>
													</div>
													<div class="right-status">
														<p>空气质量&nbsp;<span>优</span></p>
														<p>AQI&nbsp;<span>35</span><span>&nbsp;PM2.5&nbsp;</span>17</p>
													</div>
												</div>
												<div class="weather-forecast">
													<div class="weather-message">
														<div class="">
															<p><span>12-01</span></p>
															<p>阴</p>
															<img src="" alt="">
														</div>
														<div class="">
															<p><span>12-02</span></p>
															<p>阴</p>
															<img src="" alt="">
														</div>
														<div class="">
															<p><span>12-03</span></p>
															<p>多云转阴</p>
															<img src="" alt="">
														</div>
														<div class="">
															<p><span>12-04</span></p>
															<p>多云转阴</p>
															<img src="" alt="">
														</div>
														<div class="">
															<p><span>12-05</span></p>
															<p>多云</p>
															<img src="" alt="">
														</div>
													</div>
													
													<div id="echart" style="position:relative; height:100px; overflow:hidden;">
														<div id="main" class="weather-echart" style="position:absolute; top: 50%;
														transform: translateY(-50%); width: 100%; height:170px;"></div>
													</div>
												</div>
											</div>
										</div>
									</el-col>
									<el-col :span="7">
											<div class="grid-content bg-purple">
												<!-- 专题 -->
												<h3>2017年国内外十大天气气候事件评选</h3>
												<span class="discription">由中国气象局主办、公众投票参与的“国内外十大天气气候事件评选”活动，自2007年开展以来，至今已是第十一届…</span>
												<div>
													<p>1500万北京人挥扇能赶走雾霾？专家回答</p>
													<p>彗星“送来”地球大气中22%的氙气</p>
													<p>探测器显示火星90%二氧化碳进入太空</p>
													<p>5000万年前火星火山开启“静音模式”</p>
													<p>田湾河冬雪已至秋未尽彩林与雪山交相辉映</p>
												</div>
											</div>
										</el-col>
								</el-row>
								<el-row :gutter="10">
										<el-col :span="16">
											<div class="grid-content bg-purple">
												<!-- 指数 -->
												<div class="suggest-title">生活指数</div>
												<div class="suggest-content">
													<div class="suggest-message">
														<img src="/api/tp5/public/static/img/3.png" alt="">
														<div>
															<p>空气污染指数：优</p>
															<p>气象条件非常有利于空气污染物稀释、扩散和清除，可在室外正常活动。</p>
														</div>
													</div>
													<div class="suggest-message">
															<img src="/api/tp5/public/static/img/3.png" alt="">
															<div>
																<p>空气污染指数：优</p>
																<p>气象条件非常有利于空气污染物稀释、扩散和清除，可在室外正常活动。</p>
															</div>
													</div>
												</div>
											</div>
										</el-col>
										<el-col :span="7">
												<div class="grid-content bg-purple">
													<div class="topic">
														<div class="topic-title">热点专题 <span>更多</span></div>
														<div class="page-title">首届全国气象服务创新大赛在京举行</div>
														<div>
															<img src="/api/tp5/public/static/img/4.png" alt="">
															<span class="topic-discription">xxxxxxxxxxx本次大赛旨在适应气象服务发展新形势，强化气象服务创新意识，完善气象服务的有效供给。</span>
														</div>
													</div>
												</div>
										</el-col>
									</el-row>
									<el-row>
										<el-col :span="12">
											<!-- 网站 -->
											<div class="website">
												<div class="website-title">数据网站 <span>更多</span></div>
												<div class="website-discription">
													涉及大数据、环境模拟、GIS、地方地质…
												</div>
												<div class="website-category">
													<div class="website-category-content">
														<span>大数据</span>
														<span>xxxxxxxx</span>
														<span>xxxxxxx</span>
													</div>
													<div class="website-category-content">
														<span>环境模拟</span>
														<span>xxxxxxxx</span>
														<span>xxxxxxx</span>
													</div>
													<div class="website-category-content">
														<span>GIS</span>
														<span>xxxxxxxx</span>
														<span>xxxxxxx</span>
													</div>
												</div>
											</div>
										</el-col>
										<el-col :span="12">
											<div class="website">
												<div class="website-title">法制法规<span>更多</span></div>
												<div class="website-discription">
													涉及法制法规、地方地质…
												</div>
												<div class="website-category">
													<div class="website-category-content">
														<span>环保部</span>
														<span>xxxxxxxx</span>
														<span>xxxxxxx</span>
													</div>
													<div class="website-category-content">
														<span>地情网</span>
														<span>xxxxxxxx</span>
														<span>xxxxxxx</span>
													</div>
													<div class="website-category-content">
														<span>NGO</span>
														<span>xxxxxxxx</span>
														<span>xxxxxxx</span>
													</div>
												</div>
											</div>
										</el-col>
									</el-row>
								</div>
							</el-col>
						</el-row>
				</el-main>
	
				<el-footer>
	
				</el-footer>
			</el-container>
		</div>
		<script src="/tp5/public/static/js/vue.js"></script>
		<script src="/tp5/public/static/js/index.js"></script>

	<!-- built files will be auto injected -->
<script>
	new Vue({
		el: '#app',
		data: function() {
			return {

			}
		}
	});
</script>

	<script src="/tp5/public/static/js/echarts.common.min.js"></script>
	<script src="/tp5/public/static/js/index.echarts.js"></script>
</body>
</html>

